<template>
     <div class="layers4">
          <div class="title">
               <span>空间底座</span>
          </div>
          <div
               class="layersItem"
               v-for="(item, index) in 5"
               :key="item"
               :style="getItemStyle(index)"
               :data-index="index"
          >
               <div class="itemLeft">三维影像</div>
               <div class="itemRight">
                    2700
                    <span>KM</span>
               </div>
          </div>
     </div>
</template>

<script setup lang="ts">
// 计算每个项的位置样式
const getItemStyle = (index: number) => {
     switch (index) {
          case 0:
               return {
                    left: '5%',
                    top: '-5%',
               }
          case 1:
               return {
                    left: '5%',
                    bottom: '5%',
               }
          case 2:
               return {
                    left: '45%',
                    bottom: '-15%',
               }
          case 3:
               return {
                    left: '75%',
                    bottom: '-5%',
               }
          case 4:
               return {
                    left: '85%',
                    top: '-5%',
               }

          default:
               return {}
     }
}
</script>

<style scoped lang="scss">
// 定义动画变量
$item-animation-duration: 0.9s;
$item-animation-delay: 0.1s;

.layers4 {
     width: 100%;
     height: 100%;
     background: url('@/assets/images/largeScreen/layer4底座.png') no-repeat
          center center;
     background-size: 100% 100%;
     position: relative;
     // 优化的脉冲动画效果
     animation-delay: 2.5s;
     animation: pulseLayer4 6s ease-in-out infinite;

     .title {
          width: 42%;
          height: 42%;
          position: absolute;
          top: 0%;
          left: 50%;
          transform: translateX(-50%);
          background: url('@/assets/images/largeScreen/layer4底座头部.png')
               no-repeat center center;
          background-size: 100% 100%;
          color: #f4f4f4;
          display: flex;
          align-items: center;
          justify-content: center;
          // 标题淡入动画
          animation: fadeInScale 1.2s ease-out forwards;
          opacity: 0;
          transform: translate(-50%, -10px) scale(0.9);

          span {
               background: linear-gradient(to right, #00ff88 0%, #01e4f9 100%);
               -webkit-background-clip: text;
               font-size: 1.5vw; // 改为视口宽度的2%
               background-clip: text;
               color: transparent;
               font-family: 'PangMenZhengDaoBiaoTiTi';
               // 添加文字发光动画
               text-shadow: 0 0 8px rgba(1, 228, 249, 0.6);
               animation: glowStrong 2s ease-in-out infinite alternate;
          }
     }
}

.layersItem {
     width: auto;
     height: auto;
     display: flex;
     align-items: center;
     position: absolute;
     font-size: 0.7vw; // 改为视口宽度的1%
     color: #f4f4f4;
     opacity: 0;
     transform: scale(0.9);
     // 为每个元素设置不同的动画延迟
     animation: fadeInUp $item-animation-duration ease-out forwards;
     transition: all 0.3s ease;
     cursor: pointer;

     // 根据索引设置不同的动画延迟
     &[data-index='0'] {
          animation-delay: $item-animation-delay * 1;
     }

     &[data-index='1'] {
          animation-delay: $item-animation-delay * 2;
     }

     &[data-index='2'] {
          animation-delay: $item-animation-delay * 3;
     }

     &[data-index='3'] {
          animation-delay: $item-animation-delay * 4;
     }

     &[data-index='4'] {
          animation-delay: $item-animation-delay * 5;
     }

     // 悬停效果
     &:hover {
          transform: scale(1.05) !important;
          z-index: 10;
     }

     .itemLeft {
          // 改为相对单位，基于视口宽度
          width: 5vw;
          height: 8vw;
          // 文字竖型
          writing-mode: vertical-rl;
          display: flex;
          align-items: center;
          background: url('@/assets/images/largeScreen/layer4文字底座.png')
               no-repeat center center;
          background-size: 100% 100%;
          text-align: center;
          padding-top: 1vw; // 改为视口宽度的1.2%
          // 添加悬停效果
          transition: all 0.3s ease;

          &:hover {
               color: #01e4f9;
               text-shadow: 0 0 5px rgba(1, 228, 249, 0.8);
          }
     }

     .itemRight {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-top: 1vw; // 改为视口宽度的1.2%
          font-size: 1vw; // 改为视口宽度的1.5%
          gap: 0.4vw; // 改为视口宽度的0.4%
          color: #28fab8;
          // 文字发光效果 和渐变
          text-shadow:
               0 0 3vw rgba(40, 250, 183, 0.6),
               0 0 0.8vw rgba(40, 250, 183, 0.6),
               0 0 1.2vw rgba(40, 250, 183, 0.6);
          background: linear-gradient(to right, #00f6c5 0%, #01e4f9 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          font-weight: 500;
          font-family: 'PangMenZhengDaoBiaoTiTi';
          // 添加悬停效果和发光动画
          transition: all 0.3s ease;

          span {
               font-size: 1.2vw; // 单位字体改为视口宽度的1.2%
               // 为单位添加特殊动画
               animation: fadeInOut 2s ease-in-out infinite;
          }

          &:hover {
               transform: scale(1.1);
               color: #01e4f9;
               text-shadow: 0 0 8px rgba(1, 228, 249, 0.9);
          }
     }
}

// 动画定义
@keyframes fadeInUp {
     0% {
          opacity: 0;
          transform: translateY(10px);
     }

     100% {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes fadeInScale {
     0% {
          opacity: 0;
          transform: translate(-50%, -10px) scale(0.9);
     }

     100% {
          opacity: 1;
          transform: translate(-50%, 0) scale(1);
     }
}

@keyframes pulseLayer4 {
     0% {
          transform: scale(1);
          opacity: 1;
     }

     25% {
          transform: scale(1.025);
          opacity: 0.96;
     }

     50% {
          transform: scale(1.01);
          opacity: 0.98;
     }

     75% {
          transform: scale(1.025);
          opacity: 0.96;
     }

     100% {
          transform: scale(1);
          opacity: 1;
     }
}

@keyframes glowStrong {
     from {
          text-shadow:
               0 0 5px rgba(1, 228, 249, 0.6),
               0 0 10px rgba(1, 228, 249, 0.4);
     }

     to {
          text-shadow:
               0 0 10px rgba(1, 228, 249, 0.8),
               0 0 20px rgba(1, 228, 249, 0.6);
     }
}

@keyframes fadeInOut {
     0%,
     100% {
          opacity: 0.7;
     }

     50% {
          opacity: 1;
     }
}
</style>
